<template>
    <view class="bg-[#FCFCFE]">
        <!-- header -->
        <v-header />
        <!-- content -->
        <view class="max-w-[1297px] mx-auto">
            <view class="max-md:px-[5px]">
                <view class="flex items-center gap-[10px] h-[60px] mt-[15px] max-md:px-[5px]">
                    <up-image src="/static/address.png" mode="widthFix" :height="22" :width="22" shape="circle" />
                    <view class="font-bold text-3xl min-w-[40px]">{{ $t("address.title") }}</view>
                    <view class="text-[#000] text-[14px] text-ellipsis overflow-hidden max-md:flex-1">
                        {{ address }}
                    </view>
                    <up-copy
                        v-if="address"
                        class="ml-[5px] cursor-pointer"
                        :title="$t('address.copy.tip')"
                        :content="address"
                        :notice="$t('address.copy.success')"
                    >
                        <text class="fa fa-copy text-[#ADB5BD] hover:border-[blue]" />
                    </up-copy>
                    <view
                        v-if="address"
                        class="ml-[5px] cursor-pointer text-[17px]"
                        :title="$t('address.qrCode.tip')"
                        @click="qrCodeShow = true"
                    >
                        <text class="fa fa-qrcode text-[#ADB5BD]" />
                    </view>
                </view>
                <view class="max-md:hidden">
                    <up-divider :hairline="true" />
                </view>
                <view class="text-sm text-[#6C757d] max-md:hidden">
                    <text class="font-bold">Sponsored: Crudo Protocol</text>
                    <text>: Presale Stage 2 Live at $0.009, Listing soon at $0.20.</text>
                    <text class="text-[rgb(64,138,222)] font-bold cursor-pointer"> Join Presale Now!</text>
                </view>
                <view class="grid grid-cols-3 gap-[10px] max-md:grid-cols-1 mt-[20px] max-md:mt-0">
                    <uni-group mode="card">
                        <view class="flex flex-col gap-[20px]">
                            <view class="text-[15px] font-bold">{{ $t("address.overview") }}</view>
                            <view class="flex flex-col justify-center gap-[5px]">
                                <view class="text-[#6C7781] text-[13px]">{{ $t("address.hnyBalance") }}</view>
                                <view class="flex items-center gap-[5px]">
                                    <up-icon name="/static/token-light.svg" :size="16" />
                                    <!-- 这个地方后端没返回 -->
                                    <view class="text-[13px]">0 HNY</view>
                                </view>
                            </view>
                            <view class="flex flex-col justify-center gap-[5px]">
                                <view class="text-[#6C7781] text-[13px]">{{ $t("address.hnyValue") }}</view>
                                <view class="text-[13px]">
                                    <text>${{ price.nowPrice }}</text>
                                </view>
                            </view>
                        </view>
                    </uni-group>
                    <uni-group mode="card">
                        <view class="flex flex-col gap-[20px]">
                            <view class="text-[15px] font-bold">{{ $t("address.moreInfo") }}</view>
                            <view class="flex flex-col justify-center gap-[5px]">
                                <view class="text-[#6C7781] text-[13px]">{{ $t("address.lastTxnSend") }}</view>
                                <view class="text-[13px]">
                                    <!-- 这个地方后端没返回，暂时从列表中取，正确性应该是没问题的 -->
                                    <text
                                        class="text-[rgb(94,158,189)] font-bold cursor-pointer"
                                        @click="onTransaction(lastTxnSendHash)"
                                    >
                                        {{ crop(lastTxnSendHash, 13) }}
                                    </text>
                                    <text class="ml-[7px]">{{ timeAgo(lastTxnSendTime) }}</text>
                                </view>
                            </view>
                            <view class="flex flex-col justify-center gap-[5px]">
                                <view class="text-[#62717f] text-[13px]">{{ $t("address.firstTxnSend") }}</view>
                                <view class="text-[13px]">
                                    <!-- 这个地方后端没返回，暂时取本页的，叫后端增加字段 -->
                                    <text
                                        class="text-[rgb(94,158,189)] font-bold cursor-pointer"
                                        @click="onTransaction(firstTxnSendHash)"
                                    >
                                        {{ crop(firstTxnSendHash, 13) }}
                                    </text>
                                    <text class="ml-[7px]">{{ timeAgo(firstTxnSendTime) }}</text>
                                </view>
                            </view>
                        </view>
                    </uni-group>
                    <uni-group mode="card">
                        <view class="flex flex-col gap-[20px]">
                            <view class="text-[15px] font-bold">{{ $t("address.multiChainInfo") }}</view>
                            <view
                                class="text-[13px] bg-[#E9ECEF] w-[185px] px-[10px] py-[6px] rounded-[5px] cursor-pointer"
                            >
                                <text class="font-medium">$0</text>
                                <text> ({{ $t("address.multiChainPortfolio") }})</text>
                            </view>
                            <view class="text-[13px]">{{ $t("address.noAddressesFound") }}</view>
                        </view>
                    </uni-group>
                </view>
            </view>
            <view class="mt-[20px] min-h-[650px] max-md:px-[5px]">
                <uni-group mode="card">
                    <view class="flex items-center gap-[5px] mt-[5px]">
                        <text class="fa fa-industry" />
                        <text>{{ $t("address.table.tip1") }} </text>
                        <text class="cursor-pointer text-[rgb(94,158,189)]">{{ dataTotal }}</text>
                        <text> {{ $t("address.table.tip2") }}</text>
                    </view>
                    <view class="mt-[20px]">
                        <uni-table :border="false" stripe :emptyText="$t('address.table.noData')">
                            <uni-tr>
                                <uni-th align="left">{{ $t("address.table.col1") }}</uni-th>
                                <uni-th align="left">{{ $t("address.table.col2") }}</uni-th>
                                <uni-th align="left">{{ $t("address.table.col3") }}</uni-th>
                                <uni-th align="left">{{ $t("address.table.col4") }}</uni-th>
                                <uni-th align="left">{{ $t("address.table.col5") }}</uni-th>
                                <uni-th align="left">{{ $t("address.table.col6") }}</uni-th>
                                <uni-th align="left">{{ $t("address.table.col7") }}</uni-th>
                                <uni-th align="left">{{ $t("address.table.col8") }}</uni-th>
                            </uni-tr>
                            <uni-tr v-for="v in dataList" :key="v.timestamp">
                                <uni-td>
                                    <view class="flex items-center gap-[5px] text-[13px]">
                                        <view
                                            class="text-[rgb(94,158,189)] cursor-pointer"
                                            @click="onTransaction(v.col1)"
                                        >
                                            {{ crop(v.col1, 10) }}</view
                                        >
                                        <up-copy
                                            v-if="v.col1"
                                            class="ml-[5px] cursor-pointer"
                                            :title="$t('address.copy.tip')"
                                            :content="v.col1"
                                            :notice="$t('address.copy.success')"
                                        >
                                            <text class="fa fa-copy text-[#ADB5BD]" />
                                        </up-copy>
                                    </view>
                                </uni-td>
                                <uni-td>
                                    <view class="text-[11px] w-[40px]">
                                        <view
                                            v-if="v.type"
                                            class="bg-[#F0FCF7] text-[#3ED598] py-[5px] px-[5px] text-center"
                                        >
                                            {{ $t("address.table.in") }}
                                        </view>
                                        <view v-else class="bg-[#F8EBEE] text-[#EA3943] py-[5px] px-[5px] text-center">
                                            {{ $t("address.table.out") }}
                                        </view>
                                    </view>
                                </uni-td>
                                <uni-td @click="onBlock(v.col3)">
                                    <view class="text-[rgb(94,158,189)] cursor-pointer">{{ v.col3 }}</view>
                                </uni-td>
                                <uni-td>{{ timeAgo(v.col4) }}</uni-td>
                                <uni-td>
                                    <view class="flex items-center gap-[5px] text-[13px]">
                                        <view @click="onAddress(v.col5)">{{ crop(v.col5, 10) }}</view>
                                        <up-copy
                                            v-if="v.col5"
                                            class="ml-[5px] cursor-pointer"
                                            :title="$t('address.copy.tip')"
                                            :content="v.col5"
                                            :notice="$t('address.copy.success')"
                                        >
                                            <text class="fa fa-copy text-[#ADB5BD]" />
                                        </up-copy>
                                    </view>
                                </uni-td>
                                <uni-td>
                                    <view class="flex items-center gap-[5px] text-[13px]">
                                        <view @click="onAddress(v.col5)">{{ crop(v.col6, 10) }}</view>
                                        <up-copy
                                            v-if="v.col6"
                                            class="ml-[5px] cursor-pointer"
                                            :title="$t('address.copy.tip')"
                                            :content="v.col6"
                                            :notice="$t('address.copy.success')"
                                        >
                                            <text class="fa fa-copy text-[#ADB5BD]" />
                                        </up-copy>
                                    </view>
                                </uni-td>
                                <uni-td>{{ (v.col7 / 100000000).toFixed(4) }} HNY</uni-td>
                                <uni-td>{{ v.col8 }}</uni-td>
                            </uni-tr>
                        </uni-table>
                        <view
                            v-if="dataList.length > 0"
                            class="flex justify-center items-center gap-[5px] text-[14px] pt-[20px] pb-[5px] cursor-pointer text-[#606266] hover:text-primary"
                            @click="onTransactions"
                        >
                            <view>{{ $t("address.viewAll") }}</view>
                            <text class="fa fa-long-arrow-right" />
                        </view>
                    </view>
                </uni-group>
            </view>
        </view>
        <!-- footer -->
        <v-footer />
        <!-- 二维码模态框 -->
        <up-modal
            :show="qrCodeShow"
            :title="$t('address.qrCode.title')"
            :showConfirmButton="false"
            :closeOnClickOverlay="true"
            @close="qrCodeShow = false"
            width="260"
        >
            <template #default>
                <view class="flex flex-col justify-center items-center mt-[10px] gap-[10px]">
                    <view>
                        <up-qrcode
                            :size="200"
                            :val="address"
                            :loadingText="$t('address.qrCode.loadingText')"
                            :showLoading="false"
                        />
                    </view>
                    <view class="text-[12px] w-[200px] text-center text-ellipsis overflow-hidden">
                        {{ address }}
                    </view>
                </view>
            </template>
        </up-modal>
    </view>
</template>
<script setup>
import { computed, ref } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import { navigateTo, timeAgo, crop } from "@/utils/tools"
import { getAddressTransactionsList } from "@/api/common"
import useAppStore from "@/stores/app"

const appStore = useAppStore()

const price = computed(() => appStore.cacheData.price)

const lastTxnSendHash = ref("")
const lastTxnSendTime = ref(0)
const firstTxnSendHash = ref("")
const firstTxnSendTime = ref(0)

const address = ref("")
const qrCodeShow = ref(false)
const dataTotal = ref(0)
const dataList = ref([])

const getAddressTransactionsListFunc = async () => {
    try {
        const { list, total } = await getAddressTransactionsList({ address: address.value, p: 1, ps: 10 })
        dataTotal.value = total
        if (list.length > 0) {
            lastTxnSendHash.value = list[0].txinfo.hash
            lastTxnSendTime.value = list[0].timestamp
            firstTxnSendHash.value = list[list.length - 1].txinfo.hash
            firstTxnSendTime.value = list[list.length - 1].timestamp
        }

        const locale = uni.getLocale()

        dataList.value = list.map((v) => {
            return {
                col1: v.txinfo.hash,
                col2: v.type == 0 ? (locale == "en" ? "deposit" : "充值") : locale == "en" ? "withdraw" : "提现",
                col3: v.blockheight,
                col4: v.timestamp,
                col5: v.txinfo.vin[0].addr,
                col6: v.txinfo.vout[0].address,
                col7: v.txinfo.vout[0].value,
                col8: v.txinfo.gas
            }
        })
    } catch (error) {
        console.log(error)
    }
}
const onBlock = (height) => {
    navigateTo(`block?height=${height}`)
}

const onTransaction = (tx) => {
    navigateTo(`transaction?tx=${tx}`)
}

const onTransactions = () => {
    navigateTo(`transactions`)
}

onLoad((options) => {
    if (options?.address) {
        address.value = options.address
    }
    getAddressTransactionsListFunc()
})
</script>
